import React, { PureComponent } from 'react';

import { SwitchTransition, CSSTransition } from 'react-transition-group'
import { Button } from 'antd';

import "./SwitchTransition.css"

export default class SwitchTransitionDemo extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isOn: true,
    }
  }

  render() {
    const { isOn } = this.state

    return (
      <div>
        <SwitchTransition mode={"out-in"}>
          <CSSTransition
            key={isOn ? "on" : "off"}
            classNames="btn"
            timeout={300}
          >
            <Button type="primary" onClick={e => this.setState({ isOn: !isOn })}>{isOn ? "开" : "关"}</Button>
          </CSSTransition>
        </SwitchTransition>

      </div>
    );
  }
}
